<!DOCKTYPE html >
<html>
<head>
	<meta content="text/html; charset=utf-8" />
	<title>WATCH?</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="jquery-2.0.2.js"></script>
	<script type="text/javascript" src="main.js"></script>
	
</head>
<body>
	<div id="wrapper">
		<header id="header">
			<div id="movie-covers">
				<div id="cover1">
					<img src="">
				</div>
				<div id="cover2">
					<img src="">
				</div>
				<div id="cover3">
					<img src="">
				</div>
				<div id="cover4">
					<img src="">
				</div>
				<div id="cover5">
					<img src="">
				</div>	
			</div>
			<div id="logo-and-so">
				<div id="logo">
					<img src="images/final logo.png">
				</div>
				
			</div>
		</header>

		<div id="login-bg"></div>
		<div id="message-box"></div>
		<div id="login-form">
				<form id='log-form' method="post" action="login.php">
				<label class="label-login" for="user">Username: </label>
				<input type="username" id="user" name="user" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required/>
				<br/>
				<label class="label-login" for="pass">Password: </label>
				<input type="password" id="pass" name="pass" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 symbols(letters and numbers only)." required/>
				<br/>
				<input type="submit" name="login" value="Login"/>
			</form>
		</div>

		<div id="registration-form">
				<form id='reg-form' action="registration.php" method="POST">
				<label class="label-reg" for="username">Username: </label>
				<input type="username" id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required/>
				<br/>
				<label class="label-reg" for="pass1">Password: </label>
				<input type="password" id="pass1" name="pass1" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 symbols(letters and numbers only)." required/>
				<br/>
				<label class="label-reg" for="repass">Retype password: </label>
				<input type="password" id="repass" name="repass" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 symbols(letters and numbers only)." required/>
				<br/>
				<label class="label-reg" for="email">Enter e-mail: </label>
				<input type="email" id="email" name="email" required/>
				<br/>
				<label class="label-reg">Choose your top 3 favorite movie genres:</label>
				<br/>
				<label class="label-reg">1.</label>
				<select id="genre1" name="genre1">
					<option value="action">Action</option>
					<option value="adventure">Adventure</option>
					<option value="animation">Animation</option>
					<option value="biography">Biography</option>
					<option value="comedy">Comedy</option>
					<option value="crime">Crime</option>
					<option value="documentary">Documentary</option>
					<option value="drama">Drama</option>
					<option value="family">Family</option>
					<option value="fantasy">Fantasy</option>
					<option value="history">History</option>
					<option value="horror">Horror</option>
					<option value="musical">Musical</option>
					<option value="mystery">Mystery</option>
					<option value="romance">Romance</option>
					<option value="sci-fi">Sci-fi</option>
					<option value="thriller">Thriller</option>
				</select>
				<br/>
				<label class="label-reg">2.</label>
				<select id="genre2" name="genre2">
					<option value="action">Action</option>
					<option value="adventure">Adventure</option>
					<option value="animation">Animation</option>
					<option value="biography">Biography</option>
					<option value="comedy">Comedy</option>
					<option value="crime">Crime</option>
					<option value="documentary">Documentary</option>
					<option value="drama">Drama</option>
					<option value="family">Family</option>
					<option value="fantasy">Fantasy</option>
					<option value="history">History</option>
					<option value="horror">Horror</option>
					<option value="musical">Musical</option>
					<option value="mystery">Mystery</option>
					<option value="romance">Romance</option>
					<option value="sci-fi">Sci-fi</option>
					<option value="thriller">Thriller</option>
				</select>
				<br/>
				<label class="label-reg">3.</label>
				<select id="genre3"name="genre3">
					<option value="action">Action</option>
					<option value="adventure">Adventure</option>
					<option value="animation">Animation</option>
					<option value="biography">Biography</option>
					<option value="comedy">Comedy</option>
					<option value="crime">Crime</option>
					<option value="documentary">Documentary</option>
					<option value="drama">Drama</option>
					<option value="family">Family</option>
					<option value="fantasy">Fantasy</option>
					<option value="history">History</option>
					<option value="horror">Horror</option>
					<option value="musical">Musical</option>
					<option value="mystery">Mystery</option>
					<option value="romance">Romance</option>
					<option value="sci-fi">Sci-fi</option>
					<option value="thriller">Thriller</option>
				</select>
				<br/>
				<input type="submit" name="register" value="Register"/>
			</form>

		</div>

		<nav>
			<div id="navigation-manu">
				<ul>
					<li id='home'><a href="#">Home</a></li>
					<li id='program'><a href="#">Program</a></li>
					<li id='cinamas'><a href="#">Cinemas</a></li>
					<li id='movie'><a href="#">Movies</a></li>
					<li id='future'><a href="#">Upcoming</a></li>
				</ul>
				<span id="who-am-i"></span>
			</div>
		</nav>

		
			<div id="log-reg">
			<ul id="hidlog">
				<li id='login-but'><a href="#">Login</a></li>
				<li id='reg-but'><a href="#">Sing up</a></li>
			</ul>
			<ul class="out-set">
				<li class="logout-but"><a href="#">Logout</a></li>
				<li id="set-but"><a href="#">Control panel</a></li>
				<li id="stat-but"><a href="#">Statistic</a></li>
			</ul>
			<ul class="out-set">
				<li class="logout-but"><a href="#">Logout</a></li>
				<li id="admin-but"><a href="#">Admin panel</a></li>
			</ul>
			</div>

		<div id="search">
			<input type="text" name="search" id="search-text" size="15">
			<div id="search-button"><a href="#">Search</a></div>
		</div>

		<div id="content">	
			<div id="maincontent">
			</div>
		</div>

		<div id="comment-rate-bg"></div>
		<footer>
		</footer>

	</div>
</body>
</html>